import SEO from "../components/SEO";

<SEO
	title="Alert"
	description="Accessible component to create alert messages for React"
/>

# Alert

- Source: https://github.com/reach/reach-ui/tree/main/packages/alert
- WAI-ARIA: https://www.w3.org/TR/wai-aria-practices-1.2/#alert

Screen-reader-friendly alert messages. In many apps developers add "alert" messages when network events or other things happen. Users with assistive technologies may not know about the message unless you develop for it.

The Alert component will announce to assistive technologies whatever you render to the screen. If you don't have a screen reader on you won't notice a difference between rendering `<Alert>` vs. a `<div>`.

```jsx
// jsx-demo
function Example(props) {
	const [messages, setMessages] = React.useState([]);
	return (
		<div>
			<button
				onClick={() => {
					setMessages((prevMessages) =>
						prevMessages.concat([`Message #${prevMessages.length + 1}`])
					);
					setTimeout(() => {
						setMessages((prevMessages) => prevMessages.slice(1));
					}, 5000);
				}}
			>
				Add a message
			</button>
			<div>
				{messages.map((message, index) => (
					<Alert key={index}>{message}</Alert>
				))}
			</div>
		</div>
	);
}
```

## Installation

From the command line in your project directory, run `npm install @reach/alert` or `yarn add @reach/alert`. Then import the component:

```bash
npm install @reach/alert
# or
yarn add @reach/alert
```

```js
import { Alert } from "@reach/alert";
```

## Component API

### Alert

#### Alert Props

| Prop                            | Type   | Required |
| ------------------------------- | ------ | -------- |
| [`div` props](#alert-div-props) |        |          |
| [`type`](#alert-type)           | `enum` | false    |
| [`children`](#alert-children)   | `node` | true`    |

##### Alert `div` props

Any props not listed above will be spread onto the underlying `div` element.

```jsx
// jsx-demo
function Example() {
	return (
		<Alert
			style={{
				background: "hsla(10, 50%, 50%, .10)",
				padding: "10px",
			}}
		>
			❗️ Woah! Something went wrong.
		</Alert>
	);
}
```

##### Alert `type`

`type?: "assertive" | "polite"`

Controls whether the assistive technology should read immediately ("assertive") or wait until the user is idle ("polite").

```jsx
<Alert type="polite">
  This is the default
</Alert>

<Alert type="assertive">
  If a screen reader is currently reading something and
  you render this, it will interrupt the user and read
  this immediately.
</Alert>
```

You should probably stick with polite most of the time.

##### Alert children

`children: React.ReactNode;`

Regular React children.

```jsx
<Alert>
	<p>Whatever you want here</p>
	<p>Is fine.</p>
</Alert>
```
